<template>
  <div class="modelImg">
    <p><span :class="{yesActive:boo,span:true,yes:!boo}" @click="changeBoo"></span><span class="spanText">{{ bacImg }}</span></p>
    <div class="modelImgBox">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModelImg',
  props: {
    bacImg: String
  },
  data() {
    return {
      boo: true
    };
  },
  methods: {
    changeBoo() {
      this.boo = !this.boo;
    }
  }

};
</script>

<style scoped>
.modelImg{
  width: 300px;
  height: 254px;
  border: 1px solid #E6E6E6;
  opacity: 0.5;
  border-radius: 20px;
  padding: 26px;
}
.modelImg *{
  margin: 0;
  padding: 0;
}
.modelImg p{
  margin-bottom: 28px;
}
.modelImg .span{
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px dashed #333;
  opacity: 0.5;
  vertical-align: middle;
  margin-right: 10px;
}
.spanText{
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  /*line-height: 21px;*/
  color: #666666;
}
.modelImgBox{
  width: 240px;
  height: 170px;
  border: 1px dashed #666;
  margin: 0  auto;
  /*background: url("./../../../assets/icons/svg/shunFeng.png");*/
}
.yesActive{
  background: url("../../../../assets/icons/svg/yesClick.png") no-repeat center center;
}
.yes{
  background: url("../../../../assets/icons/svg/yes.png") no-repeat center center;
}
</style>
